<template>
  <div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/group' }">商品组</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="herder">
      <span><b>添加商品</b></span>
    </div>
    <div class="box">
      <span>组内商品:</span>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
    </div>
    <div class="black">
      <span>是否显示:</span>
      <div @click="add" class="border_box">
        <el-button size="mini">阿松大</el-button>
      </div>
    </div>
    <div class="up">
      <span>是否选择状态</span>
      <el-radio-group v-model="radio">
        <el-radio :label="0">启用</el-radio>
        <el-radio :label="1">禁用</el-radio>
      </el-radio-group>
    </div>
    <div class="button">
      <el-button @click="keep" type="primary">确认</el-button>
      <el-button @click="out" plain>取消</el-button>
    </div>
    <div v-show="addlbt" class="box_one">
      <div class="box_content">
        <p class="box_harder"><span>选择商品</span><i @click="add" class="el-icon-close"></i></p>
        <div class="box_search">
          <div class="mini_input">
            <!-- <span>排序:</span> -->
            <select v-model="selected">
              <option v-for="option in options" :value="option.value" :key="option.id">
                {{ option.text }}
              </option>
            </select>
            <div class="search">
              <input type="text" />
              <button>搜索</button>
            </div>
          </div>
        </div>
        <div>
          <el-table :data="arr" border style="width: 80%; margin: 0 auto; height: 60%">
            <el-table-column prop="date" label="商品" width="498">
              <template v-slot="{ row }">
                <img style="width: 80px" :src="row.name" />
              </template>
            </el-table-column>
            <el-table-column prop="price" label="价格" width="100"> </el-table-column>
            <el-table-column prop="inventory" label="库存" width="100"> </el-table-column>
            <el-table-column prop="state" label="操作" width="100">
              <template v-slot="{ row }">
                <el-button v-if="row.state == 0" @click="danger(row)" type="danger" size="mini">取消</el-button>
                <el-button v-else type="success" @click="success(row)" size="mini">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { lwjgroup_get, lwjupdatagroup_put, commodiygroup_create } from '../../../api/index'
export default {
  data() {
    return {
      input: '',
      search: '',
      currentPage1: 1,
      radio: 1,
      selected: '表单',
      addlbt: false,
      // succes: 0,
      // danger:true,
      options: [
        { text: '感冒药', value: '1' },
        { text: '感冒药', value: '2' },
        { text: '感冒药', value: '3' },
        { text: '感冒药', value: '4' },
      ],
      tableData: [],
      size: 1,
      page: 5,
      arr: [],
    }
  },
  methods: {
    //     seek(){
    //         this.arr = this.arr.filter(item => {
    //     return item.price.indexOf(this.input) > -1
    //   })
    //     },
    keep() {
      const obj = {
        Commodity_group: this.input,
        state: String(this.radio),
      }
      commodiygroup_create(obj).then((res) => {
        console.log(res)
      })
      this.$router.push('/group')
    },
    out() {
      this.$router.push('/group')
    },
    add() {
      this.addlbt = !this.addlbt
    },
    danger(row) {
      console.log(row)
      const obj = {
        id: row.id,
        state: (row.state = 1),
      }
      lwjupdatagroup_put(obj).then((res) => {
        console.log(res)
        this.addlbt = !this.addlbt
      })
    },
    handleCurrentChange(val) {
      this.size = val
      // console.log(val);
      //  console.log((this.size-1) * this.page,this.page*this.size);
      this.arr = this.tableData.slice((this.size - 1) * this.page, this.page * this.size)
    },
    handleSizeChange(val) {
      this.page = val
      this.arr = this.tableData.slice(0, this.page)
    },
    success(row) {
      const obj = {
        id: row.id,
        state: (row.state = 0),
      }
      lwjupdatagroup_put(obj).then((res) => {
        console.log(res)
        this.addlbt = !this.addlbt
      })
    },
  },
  created() {
    lwjgroup_get().then((res) => {
      console.log(res)
      this.tableData = res.data
      this.arr = res.data
    })
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  width: 100%;
  height: 30px;
}

::v-deep .el-input {
  width: 90%;
  height: 30px;
}
.block {
  margin: 30px 0 0 100px;
}
.button {
  width: 30%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  // background-color: aqua;
  margin: 300px 0 0 0;
}

.herder {
  width: 100%;
  height: 30px;
  padding: 5px 0 0 18px;
  background-color: #ccc;
  margin: 10px 0 0 0;
  border: 1px #ccc solid;
}
.box_one {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: rgb(0, 0, 0, 0.5);

  .box_content {
    width: 1000px;
    height: 800px;
    z-index: 10;
    border: 1px red solid;
    background-color: aliceblue;
    position: absolute;
    top: 0%;
    left: 22%;
  }

  .box_harder {
    background-color: #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.box {
  width: 100%;
  font-size: 14px;
  display: flex;
  align-items: center;
  margin: 20px 0 0 0;
  justify-content: space-around;
}

.black {
  width: 100%;
  font-size: 14px;
  display: flex;
  align-items: center;
  margin: 20px 0 0 0;
  justify-content: space-around;
}

.border_box {
  width: 90%;
  height: 30px;
  display: flex;
  justify-content: flex-end;
  background-color: #ccc;
}

.up {
  font-size: 14px;
  width: 300px;
  height: 30px;
  display: flex;
  margin: 20px 0 0 0;
  justify-content: space-around;
  align-items: center;
}

.box_search {
  width: 100%;
  height: 40px;
  margin: 10px;

  .mini_input {
    display: flex;
    justify-content: space-around;
  }

  select {
    width: 200px;
    margin: 5px;
  }
}

.search {
  width: 400px;
  height: 30px;
  display: flex;

  // border: 1px red solid;
  input {
    width: 360px;
  }
}
</style>
